<template>
  <div class="back" :style="{'background-image':`url('${require('@/assets/logo.png')}')`}">
    <svg width="1920px" height="115px" v-for="(item) in [0,1]" :class="{svgLink:item === 1}" :key="item">
      <defs>
        <linearGradient id="test">
          <stop offset="0" stop-color="#C4E6FF" stop-opacity="1"></stop>
          <stop offset="100%" stop-color="red" stop-opacity="1"></stop>
        </linearGradient>
      </defs>
      <path d="
      M 0 45
      L 375 45
      C 470 45 575 113 675 113
      L 916 113
" stroke-width="2" stroke="#67AEE4" fill="transparent"/>
      <path d="
      M 0 45
      L 375 45
      C 470 45 575 113 675 113
      L 916 113
" stroke-width="2" class="line1" stroke="url(#test)" fill="none"/>
      <!--
linearGradient 这个属性可以放在fill指定填充样式
也可以放在stroke中指定路径样式
-->
    </svg>
  </div>
</template>

<script>
export default {
  name: "BigScreenTitle1",
  mounted() {
  },
  data(){
    return {
    }
  },
  methods:{
  }
}
</script>

<style scoped lang="scss">
.back{
  width: 1920px;
  height: 115px;
  text-align: center;
  background-color: rgba(0,255,255,0);
  position: relative;
  .line1{
    stroke-dasharray: 10% 90%; // 10%实线 90%虚线
    stroke-dashoffset: 100%; // 100%偏移
    stroke-width: 3;
    animation-name: dash-line1;
    animation-duration: 1.5s;
    animation-direction: normal;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }
  @keyframes dash-line1 { // 动画偏移实线，用于流光展示
    from {
      stroke-dashoffset: 100%;
    }
    to {
      stroke-dashoffset: 0%;
    }
  }
  .svgLink{
    transform: rotateY(180deg);
    position: absolute;
    right: 0;
  }
}
</style>
